<template>
    <transition name="fade">
        <div class="choice">
            <!-- 搜索要卖的手机或者机型 -->
            <div class="search-box">
                <search-top @get-search="getSearch"></search-top>
            </div>
            <!-- 主体部分内容，手机的品牌/型号 -->
            <div class="choice-box">
                <left-right :brand="brand" :model="model" @toget-model="togetModel" :initId="current"></left-right>
            </div>
            <!-- 搜索页面入口 -->
            <router-view :data="searchData"></router-view>
        </div>
    </transition>
</template>

<script>
// 导入better-scroll
import {toast, indicator} from '../../base/js/toast.js'
import LeftRight from '../parts/leftRight.vue'
import SearchTop from '../parts/searchTop.vue'

const initId = 1    //初始id
export default {
    data() {
        return {
            current: parseInt( this.$route.query.id || initId), //路由id,当前展示的是哪一个品牌
            brand: [],  //品牌
            model: [],  //型号
            searchData: [], //搜索页面的数据
        }
    },
    components: {
        LeftRight, SearchTop
    },
    created() {
        this.getBrand()     //获取品牌

    },
    updated() {
        if(!this.searchData.length){
            this._initSearchData()      //初始化搜索页面数据
        }
    },
    methods: {
        //获取品牌
        async getBrand(){
            try {
                var result = await this.$ajax.get('/brand')
                if(result.status == 200) {
                    this.brand = result.data
                    // console.log(this.brand)
                }
                //获取型号
                this.getModel(this.current)
            } catch(err) {
                toast(err)
            }
        },
        //获取型号
        async getModel(id){
            try {
                var result = await this.$ajax.get('/model/'+id)
                // console.log('result:'+result)
                if(result.status == 200) {
                    this.model = result.data.data
                    // console.log(this.model)
                }
            } catch(err) {
                console.log(222)
                //如果获取失败，就把型号列表设置为空
                this.model=[]
                //去除加载中小图标
                indicator()
            }
        },
        //获取左右拍列元素派发的事件，获取对应的型号
        togetModel(id) {
            this.getModel(id)
        },
        //初始化搜索页面的列表数据
        async _initSearchData(){
            //获取第一个品牌的数据
            // console.log('search:'+this.brand)
            var id = this.brand[0].brand_id
            try {
                var result = await this.$ajax.get('/model/'+id)
                if(result.status == 200) {
                    this.searchData = result.data.data
                    // console.log(this.searchData)
                }
            } catch(err) {
                this.searchData = []
            }
        },
        //获取搜索页面传过来的数据
        getSearch(arg){
            this.searchData = arg
        }
    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .choice{
        .search-box{
            width:100%;
            position:fixed;
            top:0;
            left:0;
            z-index:20;
        }
        .choice-box{
            width:100%;
            position:fixed;
            left:0;
            top:50px;
            bottom:0;
            z-index:10;
            overflow:hidden;
        }
    }
</style>
